<template>
  <div class="echarts">
    <div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js' // 引入中国地图数据
export default {
  props: ['renderData', 'renderData2', 'regData'],
  data () {
    return {
      chart: null,
      mapData: this.renderData,
      mapData2: this.renderData2,
      mapData3: this.regData,
      // regData: this.regData,
      myChart: null
    }
  },
  mounted () {
    this.initEchartMap()
  },
  created () {
    // this.initEchartMap()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
    renderData2: function (params) {
      // if (this.mapData2.length > 0) {
      //   setTimeout(() => {
      //     this.mapData2 = params
      //   }, 1500)
      // } else {
      this.mapData2 = params
      // }

      // console.log(this.myChart)
      // //console.log(this)
      // setTimeout(() => {
      //   this.initEchartMap()
      // }, 2000)
      this.setOption()
      console.log(this.mapData2)
      // if (this.mapData.length > 1) {
      // setTimeout(() => {
      // this.mapData.shift()
      // this.mapData2.shift()
      // }, 10000)
      // }
    }
  },
  methods: {
    initEchartMap () {
      // 这里我们用固定的数据，真正使用时，用父组件传递来的数据替换series即可
      this.chart = echarts.init(this.$refs.myEchart)
      window.onresize = this.chart.resize
      this.setOption()
    },
    setOption () {
      this.chart.setOption({
        backgroundColor: '#0b1225',
        title: {
          // text: '点位分布图',
          left: 'center',
          textStyle: {
            lineHeight: 80,
            height: '80px',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        dataRange: {
          show: false,
          min: 0,
          max: 600,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        visualMap: {
          show: true,
          min: 0,
          max: 255,
          calculable: true,
          inRange: {
            color: ['aqua', 'lime', 'yellow', 'orange', '#ff3333']
          },
          textStyle: {
            color: '#12223b'
          }
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          layoutCenter: ['50%', '50%'],
          layoutSize: '130%',
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#37376e',
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          // {
          //   'type': 'lines',
          //   'zlevel': 2,
          //   'effect': {
          //     'show': true,
          //     'period': 4,
          //     'trailLength': 0.02,
          //     'symbol': 'arrow',
          //     'symbolSize': 5
          //   },
          //   'lineStyle': {
          //     'normal': {
          //       'width': 1,
          //       'opacity': 0.6,
          //       'curveness': 0.2
          //     }
          //   },
          //   'tooltip': {
          //     'trigger': 'item'
          //   },
          //   'data': this.mapData
          // },
          {
            'name': '点位',
            'type': 'effectScatter',
            'coordinateSystem': 'geo',
            'zlevel': 2,
            'rippleEffect': {
              'period': 4,
              'brushType': 'stroke',
              'scale': 4
            },
            'tooltip': {
              'trigger': 'item'
            },
            'label': {
              'normal': {
                'show': true,
                'position': 'left',
                'offset': [
                  -5,
                  5
                ],
                'formatter': '{b}'
              },
              'emphasis': {
                'show': true
              }
            },
            'hoverAnimation': true,
            'symbol': 'circle',
            'symbolSize': 15,
            'itemStyle': {
              'normal': {
                'show': false,
                'color': '#f00'
              }
            },
            'data': this.mapData2
          },
          // {
          //   'name': '总部',
          //   'type': 'scatter',
          //   'coordinateSystem': 'geo',
          //   'zlevel': 2,
          //   'tooltip': {
          //     'trigger': 'item'
          //   },
          //   'label': {
          //     'normal': {
          //       'show': true,
          //       'position': 'right',
          //       'color': '#00ffff',
          //       'formatter': '{b}',
          //       'textStyle': {
          //         'color': '#00ffff'
          //       }
          //     },
          //     'emphasis': {
          //       'show': true
          //     }
          //   },
          //   'symbol': 'circle',
          //   'symbolSize': 12,
          //   'itemStyle': {
          //     'normal': {
          //       'show': true,
          //       'color': '#EE0000'
          //     }
          //   },
          //   'data': [
          //     {
          //       'name': '泉州',
          //       'value': [
          //         118.67,
          //         24.88
          //       ]
          //     }
          //   ]
          // },
          {
            'type': 'scatter', // 为散点类型
            'coordinateSystem': 'geo', // series坐标系类型
            'tooltip': {
              formatter (params) {
                // console.log(params)
                // const item = params
                return params.name
              }
            },
            'data': this.mapData3,
            'symbol': 'pin',
            'symbolSize': [20, 20]
          }
        ]
      }, true)
    }
  }
}
</script>
<style>
.echarts{
  width: 100%;
  height: 100%;
}
</style>
